<template>
  <div class="maitou-content">
    <div class="maitou">
      <!--startprint-->
      <div>
        <div class="maitou-box" v-for="(item, index) in list" :key="index">
          <div class="pin" v-if="is_collate!=0">拼</div>
          <div class="maitou-big-title">
            <div class="maitou-title-logo">
              <!-- <img
                src="../../assets/image/maitou_logo.png"
                alt=""
                v-if="admin_id != 3"
              /> -->
            </div>
            <div class="maitou-title-name">
              <span class="name">产品信息</span>
              <span>Product information</span>
            </div>
          </div>
          <div class="maitou-box-contain">
            <div class="maitou-sidebar">
              <div class="sidebar-img">
                <img :src="item.image_middle" alt="" />
              </div>
              <div class="sidebar-describe">
                {{ item.goods_pack_name }} - (&nbsp;&nbsp;{{
                  item.maitou_num
                }}&nbsp;&nbsp;)
              </div>
              <div class="factory_count" v-if="item.factory_count > 1">拼{{ item.ranking }}/{{ item.factory_count }}</div>
              <!-- <div class="sidebar-code">
                <div class="code-img">
                  <img v-if="isType !== 'all'"
                    :src="
                      `${$domain}api/Item/GetMaitouCode?rec_id=` +
                      rec_id
                    "
                  />
                  <img v-else :src="
                      `${$domain}api/Item/GetMaitouCode?rec_id=` +
                      item.rec_id
                    " />
                </div>
                <div class="code-txt">
                  <span>查看产品详情</span>
                  <span>扫一扫</span>
                </div>
              </div> -->
            </div>
            <div class="maitou-main">
              <div class="maitou-table">
                <div class="table-tr">
                  <div class="maitou-title">名称</div>
                  <div class="table-td font-12">{{ item.goods_name }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">品名</div>
                  <div class="table-td font-12">{{ item.class_name }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">订单号</div>
                  <div class="table-td">{{ item.order_sn }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">工厂货号</div>
                  <div class="table-td">{{ item.lining_sn }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">产品编号</div>
                  <div class="table-td">{{ item.sku_sn }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">颜色</div>
                  <div class="table-td">{{ item.goods_color }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">尺寸</div>
                  <div class="table-td font-12">{{ item.goods_size }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">订单包件</div>
                  <div class="table-td">{{ item.pack_name }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">备注</div>
                  <div class="table-td font-12">{{ item.brief ? item.brief : '无' }}</div>
                </div>
              </div>

              <div class="maitou-table margin-15">
                <div class="table-tr">
                  <div class="maitou-title">收件人</div>
                  <div class="table-td">{{ item.address.consignee }}</div>
                </div>
                <div class="table-tr">
                  <div class="maitou-title">电话</div>
                  <div class="table-td">{{ item.address.mobile }}</div>
                </div>
                <div class="table-tr">
                  <div class="table-td font-12">
                    <span
                      >{{ item.address.province }}{{ item.address.city
                      }}{{ item.address.address }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="maitou-box-foot">
            <h3>收货注意事项</h3>
            <p>为保障收货，清晰界定售后的责任，收货时敬请注意：</p>
            <!-- <p>
              1、非平台物流（联运汇）的售后，请自行与物流协商处理。
            </p> -->
            <p>
              1、外包装破损严重的请直接拒收;轻微破损的，请当场拆包检查，有问题的请异常签收;并拍照留凭证，回传给我们。
            </p>
            <p>2、若产品有售后请保留外包装待协商好后再处理外包装。</p>
            <p>3、对于大理石、岩板、玻璃易损品物流保丢不包损。</p>
            <p>4、收货，售后问题，请在48小时内在后台（订单系统）提交售后具体问题，超时不受理。</p>
            <p>5、售后问题请在系统上按规范提交以便我们快速处理。</p>
          </div>
        </div>
      </div>
      <!--endprint-->
      <el-button
        class="btn-printing"
        type="primary"
        size="medium"
        @click="printing"
        >打印</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rec_id: "",
      list: [],
      type: 1,
      admin_id: 0,
      isType: "",
      is_collate: 0
    };
  },
  methods: {
    init() {
      if (this.isType === "all") {
        let data = {
          order_sn: this.$route.query.order_sn,
          factory_sn:localStorage.getItem('factory_sn')
        }
        this.$http(this.$ApiList.AllFactoryOrderMaiTou,data).then(res=>{
          this.list = res.datas
        })
      } else {
        let data = {
          order_sn: this.$route.query.order_sn,
          rec_id: this.$route.query.id,
        };
        this.$http(this.$ApiList.FactoryOrderMaiTou, data).then((res) => {
          this.list = res.datas;
          if (this.admin_id == 7) {
            let timer = setTimeout(() => {
              window.print();
            }, 300);
            this.$once("hook:beforeDestroy", () => {
              clearTimeout(timer);
            });
          }
        });
      }
    },
    printing() {
      window.print();
    },
  },
  created() {
    const isType = (this.isType = this.$route.query.type);
    this.is_collate = this.$route.query.is_collate
    if (!isType) {
      this.rec_id = this.$route.query.id;
      this.admin_id = localStorage.getItem("admin_id");
    }
    this.init();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
/*打印时屏蔽按钮*/
@media print {
  .btn-printing {
    display: none;
  }
  .table-tr .maitou-title {
    border-right: 1px solid #000 !important;
  }
  .maitou-table {
    border: 1px solid #000 !important;
    border-bottom: none !important;
  }
  .table-tr {
    border-bottom: 1px solid #000 !important;
  }
}

.maitou-content {
  min-height: 100vh;
  background-color: #fff;
}
.maitou {
  width: 500px;
  padding: 0 8px;
  margin: 0 auto;

  background-color: #fff;
}
.maitou-big-title {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  padding: 0 21px 0 21px;
}
.maitou-title-logo img {
  width: 102px;
  height: 32px;
}
.maitou-title-name {
  text-align: right;
}
.maitou-title-name span {
  display: block;
  line-height: 1;
  font-size: 12px;
}
.maitou-title-name span.name {
  font-size: 16px;
}
.maitou-box {
  width: 100%;
  padding-top: 15px;
  page-break-before: auto;
  page-break-after: always;
  position: relative;
  .pin{
    position: absolute;
    font-weight: bold;
    font-size: 40px;
    width: 80px;
    height: 80px;
    border: solid 1px #000;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    top: 30px;
    left: 50px;
    z-index: 2;
    background-color: #FFF;
  }
}

.maitou-box-contain {
  display: flex;
  justify-content: space-between;
}

.maitou-box:last-child {
  padding-bottom: 0;
}

.maitou-sidebar {
  width: 204px;
}
.sidebar-img img {
  width: 204px;
  height: 204px;
}
.code-img img {
  width: 130px;
  height: 130px;
}
.sidebar-describe {
  font-size: 34px;
  line-height: 34px;
  text-align: center;
  padding: 15px 0 23px;
}
.sidebar-code {
  display: flex;
  margin-top: 34px;
}
.factory_count {
  text-align: center;
  margin-top: 68px;
  font-size: 40px;
  font-weight: bold;
}
.sidebar-code .code-txt {
  padding-left: 7px;
}
.sidebar-code .code-txt span {
  padding-top: 4px;
  font-size: 12px;
  line-height: 13px;
  display: inline-block;
  width: 14px;
  vertical-align: top;
}
.maitou-main {
  box-sizing: border-box;
  flex: 1;
  padding-left: 20px;
}
.maitou-table {
  width: 100%;
  height: auto;
  border: 1px solid #b5b5b5;
  border-bottom: none;
}
.table-tr {
  display: flex;
  min-height: 36px;
  text-align: center;
  align-items: center;
  border-bottom: 1px solid #b5b5b5;
}
.table-tr .maitou-title {
  width: 86px;
  border-right: 1px solid #b5b5b5;
}
.table-tr .table-td {
  flex: 1;
}
.table-tr .table-td {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-tr .table-td span {
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.margin-15 {
  margin-top: 15px;
}
.font-12 {
  line-height: 14px;
  font-size: 14px;
  padding: 6px;
  height: 55px;
}
.maitou-box-foot {
  margin-top: 16px;
  padding: 0 8px;

  h3 {
    margin-bottom: 6px;
  }
  p {
    line-height: 26px;
  }
}
</style>
